<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米商城</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="header">
      <div class="header-box">
        <div class="header-left">
          <a href="">小米官网</a>
          <a href="">小米商城</a>
          <a href="">MIUI</a>
          <a href="">loT</a>
          <a href="">云服务</a>
          <a href="">天星数科</a>
          <a href="">有品</a>
          <a href="">小爱开放平台</a>
          <a href="">企业团购</a>
          <a href="">资质证照</a>
          <a href="">协议规则</a>
          <a href="">下载app</a>
          <a href="">Select Location</a>
        </div>
        <div class="header-right">
          <div class="text">
            <a href="">登录</a>
            <a href="">注册</a>
            <a href="">消息通知</a>
          </div>
          <div class="select">
            <div class="yuyan">Language</div>
            <div class="language">
              <p>简体中文</p>
              <p>English</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- center -->
    <div class="name">
      <div class="name-box">
        <div class="phone-text">手机</div>
        <div class="more">
          <span>查看更多</span>
        </div>
      </div>
    </div>
    <div class="phone">
      <div class="phone-box">
        <div class="big-box"><img src="./images/phone.webp" /></div>
        <div class="box1">
          <div class="box-top">
            <div class="box-phone">
              <img
                src="./images/202207011810_86ad513472d1423a3fdec8d7d5107038.webp"
              />
            </div>
            <div class="box-text">
              <h3>Xiaomi 12S Ultra</h3>
              <p>这真徕卡｜专业徕卡影像</p>
              <span>5999元起</span>
            </div>
          </div>
          <div class="box-bottom">
            <div class="box-phone"><img src="./images/5.webp" alt="" /></div>
            <div class="box-text">
              <h3>Redmi Note 11T Pro+</h3>
              <p>天玑8100｜真旗舰芯</p>
              <span>1999元起<del>2099元</del></span>
            </div>
          </div>
        </div>
        <div class="box2">
          <div class="box-top">
            <div class="box-phone"><img src="./images/2.webp" alt="" /></div>
            <div class="box-text">
              <h3>Xiaomi 12S Pro</h3>
              <p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
              <span>4699元起</span>
            </div>
          </div>
          <div class="box-bottom">
            <div class="box-phone"><img src="./images/6.webp" alt="" /></div>
            <div class="box-text">
              <h3>Redmi Note 11T Pro</h3>
              <p>天玑8100｜真旗舰芯</p>
              <span>1699元起 <del>1799元</del></span>
            </div>
          </div>
        </div>
        <div class="box3">
          <div class="box-top">
            <div class="box-phone"><img src="./images/3.webp" alt="" /></div>
            <div class="box-text">
              <h3>Xiaomi 12S</h3>
              <p>小尺寸性能旗舰 | 徕卡影像</p>
              <span>3999元起</span>
            </div>
          </div>
          <div class="box-bottom">
            <div class="box-phone"><img src="./images/7.webp" alt="" /></div>
            <div class="box-text">
              <h3>Redmi Note 11SE</h3>
              <p>双卡双5G｜疾速登陆</p>
              <span>999元起<del>1099元</del></span>
            </div>
          </div>
        </div>
        <div class="box4">
          <div class="box-top">
            <div class="box-phone"><img src="./images/4.webp" alt="" /></div>
            <div class="box-text">
              <h3>Xiaomi 12 Pro 天玑版</h3>
              <p>全球首发天玑9000+｜叶脉冷泵散热系...</p>
              <span>3999元起</span>
            </div>
          </div>
          <div class="box-bottom">
            <div class="box-phone"><img src="./images/8.webp" alt="" /></div>
            <div class="box-text">
              <h3>Xiaomi Civi 1S</h3>
              <p>原生美肌人像｜奇迹阳光动人新色｜...</p>
              <span>2299元起</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- footer -->
    <div class="footer">
      <div class="footer-box">
        <div class="footer-top">
          <div class="footer-top-box">
            <img src="./images/扳手.png" alt="" />
            <p>预约维修服务</p>
          </div>
          <div class="footer-top-box">
            <img src="./images/7.png" alt="" />
            <p>7天无理由退货</p>
          </div>
          <div class="footer-top-box">
            <img src="./images/15.png" alt="" />
            <p>15天免费换货</p>
          </div>
          <div class="footer-top-box">
            <img src="./images/礼物.png" alt="" />
            <p>满69元包邮</p>
          </div>
          <div class="footer-top-box">
            <img src="./images/weizhi.png" alt="" />
            <p>1100余家售后网点</p>
          </div>
        </div>
        <div class="footer-bottom">
          <dl class="list1">
            <dt></dt>
          </dl>
          <dl class="list2">
            <dt>选购指南</dt>
            <dd>手机</dd>
            <dd>电视</dd>
            <dd>笔记本</dd>
            <dd>平板</dd>
            <dd>穿戴</dd>
            <dd>耳机</dd>
            <dd>家电</dd>
            <dd>路由器</dd>
            <dd>音响</dd>
            <dd>配件</dd>
          </dl>
          <dl class="list3">
            <dt>服务中心</dt>
            <dd>申请售后</dd>
            <dd>售后政策</dd>
            <dd>维修服务价格</dd>
            <dd>订单查询</dd>
            <dd>以旧换新</dd>
            <dd>保障服务</dd>
            <dd>防伪查询</dd>
            <dd>F码通道</dd>
          </dl>
          <dl class="list4">
            <dt>线下门店</dt>
            <dd>小米之家</dd>
            <dd>服务网点</dd>
            <dd>授权体验店/专区</dd>
          </dl>
          <dl class="list5">
            <dt>关于小米</dt>
            <dd>了解小米</dd>
            <dd>加入小米</dd>
            <dd>投资者关系</dd>
            <dd>企业社会责任</dd>
            <dd>廉洁举报</dd>
          </dl>
          <dl class="list6">
            <dt>关注我们</dt>
            <dd>新浪微博</dd>
            <dd>官方微信</dd>
            <dd>联系我们</dd>
            <dd>公益基金会</dd>
          </dl>
          <div class="kefu">
            <p class="dianhua">400-100-5678</p>
            <p class="time">8:00-18:00（仅收市话费)</p>
            <a href="" class="rengong">人工客服</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
